<template>
  <el-dialog
    width="90%"
    :title="formData.title"
    destroy-on-close
    append-to-body
    :visible.sync="show"
    :before-close="cancel"
  >
    <div>
      <el-table :height="calTableHeight() - 100" ref="TableRef" :data="tableData" row-key="menuId">
        <!-- 租户 -->
        <el-table-column :label="$t('租户')" align="center" show-overflow-tooltip prop="distrName" width="200" />
        <el-table-column :label="$t('店铺/平台')" align="center" show-overflow-tooltip prop="xxx" width="200">
          <template slot-scope="{ row }">
            <div>{{ row.shopName }}</div>
            <div>{{ row.shopTypeName }}</div>
          </template>
        </el-table-column>
        <!-- 账单类型 1订单批次sku费用，2批次订单快递费用，3订单批次捆包费用，4订单批次手续费用，5再发货sku费用，6再发货快递费用，7再发货捆包费用，8提前付款，9阶段付款 -->
        <el-table-column :label="$t('账单类型')" align="center" show-overflow-tooltip prop="type" width="200">
          <template slot-scope="{ row }">
            <span :style="{ color: $randomColor(row.type) }">
              {{ handlePayType(row.type) }}
            </span>
          </template>
        </el-table-column>
        <!-- 应付款金额 -->
        <el-table-column align="center" show-overflow-tooltip :label="$t('应付款金额')" prop="payAmount">
          <!-- 应付款金额币种 1RMB 2JPY 3USD -->
          <template slot-scope="{ row }">
            <span v-if="row.paid == 1" style="cursor: pointer; color: blue">
              {{ (+row.payAmount).toFixed() }}
              <span v-if="row.payCurrency == 1">RMB</span>
              <span v-if="row.payCurrency == 2">JPY</span>
              <span v-if="row.payCurrency == 3">USD</span>
            </span>

            <span v-else>
              {{ (+row.payAmount).toFixed() }}
              <span v-if="row.payCurrency == 1">RMB</span>
              <span v-if="row.payCurrency == 2">JPY</span>
              <span v-if="row.payCurrency == 3">USD</span>
            </span>
          </template>
        </el-table-column>
        <!-- 人民币对日汇率 -->
        <el-table-column align="center" show-overflow-tooltip prop="rmbRate" :label="$t('人民币对日汇率')" width="80" />
        <!-- 美元对日汇率 -->
        <el-table-column align="center" show-overflow-tooltip prop="usdRate" :label="$t('美元对日汇率')" width="80" />
        <!-- 支付渠道 -->
        <el-table-column align="center" show-overflow-tooltip prop="payChannel" :label="$t('支付渠道')">
          <template slot-scope="{ row }">
            {{ handleType(row.payChannel, pay_channel_list) }}
          </template>
        </el-table-column>
        <el-table-column align="center" width="80" prop="offlineStatus" :label="$t('线下支付审核状态')">
          <template slot-scope="{ row }">
            <span v-if="row.offlineStatus == 1">
              <!-- 待审核 -->
              {{ $t('审核中') }}
            </span>
            <span style="color: green" v-if="row.offlineStatus == 2">
              <!-- 审核通过 -->
              {{ $t('已确定') }}
            </span>
            <span style="color: red" v-if="row.offlineStatus == 3">
              <!-- 审核不通过 -->
              {{ $t('取消') }}
            </span>
          </template>
        </el-table-column>
        <!-- 账单生成时间 -->
        <el-table-column align="center" show-overflow-tooltip prop="createTime" :label="$t('账单生成时间')" />
        <!-- 是否结账 -->
        <el-table-column align="center" show-overflow-tooltip prop="paid" :label="$t('是否结账')">
          <template slot-scope="{ row }">
            <span v-if="row.paid == 1" style="color: green">
              <!-- 已支付 -->
              {{ $t('是') }}
            </span>
            <span v-if="row.paid == 0" style="color: red">
              <!-- 未支付 -->
              {{ $t('否') }}
            </span>
          </template>
        </el-table-column>
        <!-- 支付日期 -->
        <el-table-column align="center" show-overflow-tooltip prop="payTime" :label="$t('支付日期')" width="150" />
        <!-- 支付金额修改备注 -->
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="payAmountUpdateRemark"
          :label="$t('支付金额修改备注')"
        />
        <!-- 操作 -->
        <el-table-column align="center" fixed="right" :label="$t('操作')">
          <template slot-scope="{ row }">
            <el-button v-hasPermi="['distribution:bill:query']" type="text" size="small" @click="handleDetail(row)">
              <!-- 查看 -->
              {{ $t('查看') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <Detail
        :FormData="FormData"
        :type="detailInfo.type"
        :show.sync="detailInfo.show"
        :title="detailInfo.title"
        :data="detailInfo.data"
      />
    </div>
    <div slot="footer">
      <el-button @click="cancel">{{ $t('关闭') }}</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { offlinePayInfo } from '@/api/bill/offlinePaymentReview'
import handleTableSum from '@/utils/handleSum'
import { useDict } from '@/utils/useDict'
import Detail from '@/views/bill/seller/components/detail.vue'

import { getBillDetails } from '@/api/bill/seller'
export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  components: { Detail },
  props: {
    /**
     * show
     */
    show: {
      type: Boolean,
    },
    /**
     * formData
     */
    formData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      FormData: {},
      /**详情信息 */
      detailInfo: {
        /**显示详情 */
        show: false,
        type: '',
        title: '',
        data: [],
        query: {},
      },
      tableData: [],
      total: 0,
      /**
       * 支付类型字典
       */
      pay_type_list: [],
      /**
       * 支付渠道
       */
      pay_channel_list: [],
      /**
       * 结账类型
       */
      closing_type_list: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    }
  },
  watch: {
    show: function (newValue) {
      if (newValue) {
        useDict('pay_type').then(({ pay_type }) => (this.pay_type_list = pay_type))
        useDict('pay_channel').then(({ pay_channel }) => (this.pay_channel_list = pay_channel))
        useDict('closing_type').then(({ closing_type }) => (this.closing_type_list = closing_type))
        this.getList()
      }
    },
  },
  methods: {
    getList() {
      offlinePayInfo({
        ...this.queryParams,
        id: this.formData.id,
      }).then((res) => {
        this.tableData = res.data.billSellerPage.rows
        this.total = res.data.billSellerPage.total
      })
    },
    handleDetail(row) {
      const { id, type } = row
      getBillDetails(id).then((res) => {
        const { code, data } = res
        this.FormData = data
        if (code === 200) {
          this.detailInfo.show = true
          this.detailInfo.title = this.handlePayType(type)
          this.detailInfo.type = type

          this.detailInfo.data = []
          switch (type) {
            case 8 /**提前付款 type=8 */:
              data.sellerApplyVo.remark = data.remark
              this.detailInfo.data = [data.sellerApplyVo]
              break
            case 9 /**阶段付款 type=9 */:
              this.detailInfo.data = data.phaseBillData
              break
            case 10 /**订单批次sku费用 type=10 */:
              this.detailInfo.data = [
                {
                  batchBaleFee: data.batchBaleFee,
                  batchExpressFee: data.batchExpressFee,
                  batchHandlingFee: data.batchHandlingFee,
                  batchSkuWaitPayTotal: data.batchSkuWaitPayTotal,
                },
              ]
              break
            case 11 /**续费充值 type=11 */:
              let rechargeRecord = JSON.parse(data.remark)
              rechargeRecord.payAmount = data.payAmount
              this.detailInfo.data = [rechargeRecord]
              break

            case 12 /**卖家充值积分 type=12 */:
              this.detailInfo.data = [data]
              break
            case 13 /**代做模板积分付款 type=13 */:
              this.detailInfo.data = data.skuTempProxyDetails
              break
            case 14 /**卖家充值积分 type=14 */:
              this.detailInfo.data = data.skuTempProxyDetails
              break
            default:
              break
          }
        }
      })
    },
    handleType(type, list) {
      const index = list.findIndex((i) => i.dictValue == type)
      return list[index]?.dictLabel
    },
    handlePayType(type) {
      const index = this.pay_type_list.findIndex((i) => i.dictValue == type)
      if (index > -1) return this.pay_type_list[index].dictLabel
    },
    handleSum(param) {
      /**
       * 需要进行统计的字段
       */
      const data = handleTableSum(param, [])
      return data
    },

    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
